import React, { Component } from "react";

import { Flex } from "antd-mobile";

import { get_News_Data } from "../../utils/http_biz";

import { BASE_URL } from "../../utils/url";

class News extends Component {
  state = {
    data: [],
  };

  async componentDidMount() {
    let { body } = await get_News_Data();
    this.setState({ data: body });
  }

  render() {
    return (
      <div>
        <h3 className="title">最新资讯</h3>

        {/* 下面的div是要循环遍历的 */}
        {/* this.state.data数组中的对象格式：
        {
          "id": 1,
          "title": "置业选择 | 安贞西里 三室一厅 河间的古雅别院",
          "imgSrc": "/img/news/1.png",
          "from": "新华网",
          "date": "两天前"
        },
     */}
        {this.state.data.length > 0 &&
          this.state.data.map((item) => (
            <div className="news-item" key={item.id}>
              <div className="imgwrap">
                <img className="img" src={BASE_URL + item.imgSrc} alt="" />
              </div>
              <Flex className="content" direction="column" justify="between">
                <h3 className="title">{item.title}</h3>
                <Flex className="info" justify="between">
                  <span>{item.from}</span>
                  <span>{item.date}</span>
                </Flex>
              </Flex>
            </div>
          ))}
      </div>
    );
  }
}

export default News;
